<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Insert title here</title>
    <link rel="stylesheet" href="resources/layui/css/layui.css">
    <script src="resources/layui/layui.js" charset="utf-8"></script>
    <script src="resources/jquery.min.js"></script>
    <style>
        .addwidth {
            height: 20px;
        }
    </style>
</head>
<body>
<!-- 页面内容结构 -->

<!-- 表格上方标题 -->
<!--<blockquote class="layui-elem-quote">公告列表</blockquote>-->
<!-- 员工信息表 -->
<table class="layui-hide" id="test" lay-filter="test"></table>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs layui-bg-blue" lay-event="detail">查看详情</a>
</script>

<!-- 添加和批量删除模块 -->

<script type="text/html" id="toolbarDemo">
    <button class="layui-btn layui-btn-sm layui-icon layui-icon-refresh" id="returnList">返回列表</button>
    </button></script>

<!-- 分页模块 -->
<div id="pages"></div>


<div id="add-user-layer" style="display: none; padding:15px 30px">
    <form id="add-user-form" class="layui-form layui-form-pane"
          method="post">
        <div class="layui-form">
            <div class="layui-form-item ">
                <label class="layui-form-label">公告标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" class="layui-input" id="title"
                           lay-verify="required" autocomplete="off" placeholder="请输入标题">
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 15px;">
                <label class="layui-form-label">显示选择</label>
                <div class="layui-input-block">
                    <select name="roleToSee" lay-filter="roleToSee">
                        <option value="全部员工" selected="">全部员工</option>
                        <option value="所有经理">所有经理</option>
                        <!--<option value="未发布">保存（未发布）</option>-->
                    </select>
                </div>
            </div>
            <div class="layui-form-item " style="margin-top: 15px;">
                <label class="layui-form-label">发布时间</label>
                <div class="layui-input-block">
                    <input type="text" name="releaseTime" lay-verify="required" class="layui-input" id="test17" readonly="readonly">
                </div>
            </div>

            <div class="layui-form-item layui-form-text" style="margin-top: 15px;">
                <label class="layui-form-label">公告内容</label>
                <div class="layui-input-block">
                    <textarea name="content" id="content" placeholder="请输入内容" lay-verify="required" class="layui-textarea" rows="8"></textarea>
                </div>
            </div>
            <div class="layui-form-item" style="margin-top: 30px;">
                <div class="layui-input-block" style="margin-left: 130px;">
                    <button class="layui-btn layui-icon layui-icon-ok" lay-submit
                            lay-filter="add-user-form-submit" style="width: 130px;margin-right: 20px;">提交
                    </button>
                    <button type="button"
                            class="layui-btn layui-btn-primary layui-icon layui-icon-refresh" id="res" style="width: 130px;">重置
                    </button>
                </div>
            </div>
        </div>
    </form>
</div>
<div id="detail-user-layer" style="display: none; padding:15px">
    <form id="detail-user-form" class="layui-form layui-form-pane" lay-filter="detail-user-form" method="post">
        <div class="layui-form">
            <!--<div class="layui-form-item ">
                <label class="layui-form-label">公告标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" class="layui-input" id="title2"
                           lay-verify="required" autocomplete="off" readonly="readonly">
                </div>
            </div>-->
            <div class="layui-form-item layui-form-text" style="margin-top: 15px;">
                <label class="layui-form-label">公告内容</label>
                <div class="layui-input-block">
                    <textarea name="content" id="content2" readonly="readonly" lay-verify="required" class="layui-textarea" rows="18"></textarea>
                </div>
            </div>
        </div>
    </form>
</div>


<script>
    layui.use(['jquery', 'laypage', 'layer', 'table', 'form', 'laydate'],
        function () {
            var $ = layui.$;
            var layer = layui.layer;
            var table = layui.table;
            var form = layui.form;
            var laypage = layui.laypage;
            var laydate = layui.laydate;

            function Ajax(){
                $.ajax({
                    url: 'list_RoleAndDepart',
                    method: 'get',
                    dataType: 'json',
                    success: function (data) {
                        $('#depart').append("<option value=''>请选择部门</option>");
                        for (var i=0; i<data.data1.length; i++){
                            $('#depart').append("<option value="+data.data1[i].dept_name+">"+data.data1[i].dept_name+"</option>");
                        }
                    }
                })
            }

            function departAjax(){
                $.ajax({
                    url: 'list_RoleAndDepart',
                    method: 'get',
                    dataType: 'json',
                    success: function (data) {
                        $('#depart').append("<option value=''>请选择部门</option>");
                        for (var i=0; i<data.data1.length; i++){
                            $('#depart').append("<option value="+data.data1[i].dept_name+">"+data.data1[i].dept_name+"</option>");
                            $('#depart01').append("<option value="+data.data1[i].dept_name+">"+data.data1[i].dept_name+"</option>");
                            $('#depart02').append("<option value="+data.data1[i].dept_name+">"+data.data1[i].dept_name+"</option>");
                        }
                    }
                })
            }

            departAjax();
            function showAll(url_data, method_data) {
                //显示所有员工信息
                table.render({
                    elem: '#test',
                    url: url_data,
                    method: method_data,
                    limit: 8,
                    toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
                    defaultToolbar: ['filter', 'exports', 'print'],
                    title: '用户数据表',
                    cols: [[ {
                        field: 'author',
                        title: '发布者',
                        align: 'center'
                    }, {
                        field: 'title',
                        title: '标题',
                        align: 'center'
                    }, {
                        field: 'content',
                        title: '内容',
                        align: 'center'
                    }, {
                        field: 'time',
                        title: '发布时间',
                        sort: true,
                        align: 'center'
                    }, {
                        fixed: 'right',
                        title: '操作',
                        align: 'center',
                        toolbar: '#barDemo'
                    }]],
                    id: 'user_id'
                });
            }

            showAll('listAnnouncementByE', 'get');
            function shuju(url_data1, url_data2) {
                $.ajax({
                    url: url_data1,
                    method: 'get',
                    dataType: 'json',
                    success: function (data) {
                        console.log(data);
                        laypage.render({
                            elem: 'pages',
                            count: data.total//数据总数，从服务端得到
                            ,
                            limit: data.count,
                            limits: [5, 8, 16, 30, 1000],
                            groups: 5,
                            layout: ['count', 'prev', 'page', 'next',
                                'limit', 'refresh', 'skip'],
                            jump: function (obj, first) {
                                //首次不执行
                                if (!first) {
                                    Ajax();
                                    showAll(url_data2 + "start="
                                        + (obj.curr - 1)
                                        * obj.limit + "&count="
                                        + obj.limit, "get");
                                }
                            }
                        });
                    }
                });
            }

            shuju('listAnnouncementByE', 'listAnnouncementByE?');
            $('body').on('click', '#add-user-btn', function () {
                // 每次显示前重置表单
                $('#add-user-form')[0].reset();
                layer.open({
                    type: 1,
                    title: '添加公告',
                    skin: 'layui-layer-molv',
                    area: ['680px','432px'],
                    content: $('#add-user-layer')
                });
                nowTime();
            });

            // 添加用户表单提交
            form.on('submit(add-user-form-submit)', function (data) {
                // ajax方式添加用户
                $.ajax({
                    url: "addAnnouncement",
                    type: "post",
                    data: JSON.stringify(data.field),
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (data) {
                        if (data.status == 1) {
                            Ajax();
                            layer.close(layer.index);
                            form.render();
                            layer.msg('添加成功');
                            shuju('listAnnouncementByE', 'listAnnouncementByE?');
                            table.reload('user_id');
                        } else {
                            layer.msg('添加失败');
                        }
                    },
                    error: function () {
                        console.log("ajax error");
                    }
                });
                // 阻止表单跳转
                return false;
            });

            //批量删除已选择的行
            $('body').on(
                'click',
                '#delete-all-select',
                function () {
                    var arr = table.checkStatus('user_id').data;
                    console.log(arr);
                    if (arr.length == 0) {
                        layer.msg("请选择要删除的项！");
                    } else {
                        layer.confirm('确定删除这' + arr.length
                            + '条数据吗？', function (index) {
                            var ids = [];
                            for (var i in arr) {
                                ids.push(arr[i].id);
                            }
                            console.log(ids);
                            // ajax方式批量删除员工信息
                            $.ajax({
                                url: 'deleteBatchAnnounce',
                                type: "post",
                                data: {
                                    "ids[]": ids
                                },
                                dataType: 'json',
                                success: function (data) {
                                    if (data.status == 1) {
                                        Ajax();
                                        layer.msg('删除成功');
                                        table.reload('user_id');
                                        shuju('getPageInfo',
                                            'list?');
                                    } else {
                                        layer.msg('删除失败');
                                        console.log(eids);
                                    }
                                },
                                error: function () {
                                    console.log("ajax error");
                                }
                            });
                            layer.close(index);
                        });
                    }

                })

            //监听行工具栏事件：删除用户与更新用户
            table.on('tool(test)', function (obj) {
                var data = obj.data;
                var event = obj.event;
                //查看公告事件
                if (event === 'detail') {
                    form.val('detail-user-form', {
                        'title': data.title,
                        'content': data.content
                    });
                    layer.open({
                        type: 1,
                        title: data.title,
                        skin: 'layui-layer-molv',
                        area: ['650px','532px'],
                        // 显示更新员工信息表单的弹出层
                        content: $('#detail-user-layer')
                    });
                }
                // 删除用户事件
                if (event === 'del') {
                    layer.confirm('确定删除该公告吗？', function (index) {
                        // ajax方式删除用户
                        $.ajax({
                            url: 'deleteAnnouncement',
                            type: "post",
                            data: {
                                "id": data.id
                            },
                            dataType: 'json',
                            success: function (data) {
                                if (data.status == 1) {
                                    Ajax();
                                    layer.msg('删除成功');
                                    table.reload('user_id');
                                    shuju('listAnnouncement', 'listAnnouncement?');
                                } else {
                                    layer.msg('删除失败');
                                }
                            },
                            error: function () {
                                console.log("ajax error");
                            }
                        });
                        layer.close(index);
                    });
                }

                //编辑员工信息
                if (event == 'edit') {
                    form.val('update-user-form', {
                        'id': data.id,
                        'title': data.title,
                        'content': data.content,
                        'author': data.author,
                        'roleToSee': data.roleToSee,
                        'releaseTime': data.time
                    });
                    // 显示更新员工信息表单的弹出层
                    layer.open({
                        type: 1,
                        title: '编辑公告',
                        skin: 'layui-layer-molv',
                        area: ['650px','532px'],
                        content: $('#update-user-layer')
                    });
                    // 更新用户表单提交
                    form.on('submit(update-user-form-submit)',
                        function (data) {
                            // ajax方式添加用户
                            console.log(data.field);
                            $.ajax({
                                url: "updateAnnouncement",
                                type: "post",
                                data: JSON.stringify(data.field),
                                contentType: 'application/json',
                                dataType: 'json',
                                success: function (data) {
                                    if (data.status == 1) {
                                        Ajax();
                                        layer.close(layer.index);
                                        form.render();
                                        layer.msg('更新成功');
                                        table.reload('user_id');
                                    } else {
                                        layer.msg('更新失败');
                                    }
                                },
                                error: function () {
                                    console.log("ajax error");
                                }
                            });
                            // 阻止表单跳转
                            return false;
                        });
                }
            });

            $('body').on('click', '#returnList', function () {
                Ajax();
                shuju('listAnnouncementByE', 'listAnnouncementByE?');
                showAll('listAnnouncementByE', 'get');
            })



            //获取当前日期时间
            function nowTime() {      //获取当前时间的函数
                var date = new Date()
                var year = date.getFullYear();
                var month = date.getMonth() + 1;
                var day = date.getDate();
                month = checkTime(month)
                day = checkTime(day)
                var txt = year + "-" + month + "-" + day;
                $('#test17').val(txt);
            }


            function checkTime(i) {   //检查分和秒，如果小于10，则在数字前加上0
                if (i < 10) {
                    i = "0" + i
                }
                return i
            }

        });
</script>
</body>
</html>